<template>
  <div class="store">
    <div class="store-top">
      <div>
        <div>
          <h3>{{ form.name }}</h3>
          <span
            ><van-rate v-model="form.score" allow-half color="#FF9A02"
          /></span>
          <span class="ml5">(评分)</span
          ><span class="ml5">月售{{ form.sellCount }}</span>
        </div>
        <van-goods-action-icon
          icon="like"
          :text="flag ? '已收藏':'收藏'"
          :color="flag ? 'red':'#FFC300'"
          style="font-size: 18px"
          @click="collectstore"
        />
      </div>
    </div>
    <div class="store-midium">
      <div>
        <span>起送价</span>
        <span
          ><span class="fz25">{{ form.minPrice }}</span> 元</span
        >
      </div>
      <div>
        <span>商家配送</span>
        <span
          ><span class="fz25">{{ form.deliveryPrice }}</span
          >元</span
        >
      </div>
      <div>
        <span>平均配送时间</span>
        <span
          ><span class="fz25">{{ form.deliveryTime }}</span
          >分钟</span
        >
      </div>
    </div>
    <div class="store-bottom">
      <h3>活动与公告</h3>
      <span>
        {{ form.bulletin }}
      </span>
      <van-divider />
    </div>
    <div class="store-activity">
      <div>
        <van-tag type="danger" style="margin-right: 10px; margin-bottom: 15px"
          >减</van-tag
        >{{ supports1 }}
      </div>
      <div>
        <van-tag type="primary" style="margin-right: 10px">折</van-tag
        >{{ supports2 }}
      </div>
  
    </div>
  </div>
</template>

<script>
import { getshopSeller } from "@/apis/merchandise";
export default {
  data() {
    return {
      form: "", //商家信息
      supports1: "", //支持的第一个活动
      supports2: "", //支持的第二个活动
      flag:true
    };
  },
  // 练习
  computed:{

  },
  methods:{
    // 点击收藏
    collectstore(){
      this.flag=!this.flag
    }
  },
  async created() {
    let res = await getshopSeller();
    this.form = res.data.data;
    // console.log( res.data.data);
    this.supports1 = this.form.supports[0];
    this.supports2 = this.form.supports[1];
  },
};
</script>

<style lang="less" scoped>
.store {
  background-color: #f4f5f7;
}
.store-top {
  padding: 0px 10px;
  background-color: #fff;
  > div {
    padding: 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebedf0;
    border-top: 1px solid #ebedf0;
  }
  h3 {
    font-weight: normal;
    margin-bottom: 10px;
  }
}
.store-midium {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  height: 56px;
  padding: 15px 0;
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
.store-bottom {
  padding: 15px 10px 1px;
  margin-top: 20px;
  background-color: #fff;
  h3 {
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 15px;
  }
  span {
    color: #eb8c71;
  }
}
.store-activity {
  padding: 0px 10px;
  background-color: #fff;
}
.fz25 {
  font-size: 25px;
}
.ml5 {
  margin-left: 5px;
}
</style>